﻿<%@ Page Title="" Language="C#" MasterPageFile="~/masters/SecuredInterna.Master" AutoEventWireup="true" CodeBehind="pagosFacturas.aspx.cs" Inherits="BancoIdeal.secured.pagosFacturas" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitlePageSecured" runat="server">
    Pagos electrónicos
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
	<script src="../scripts/util.js" type="text/javascript"></script>
    <script type="text/javascript">
        var dirProductos = "/WS/Productos.asmx";
        var idCuenta = '';
        var idFactura = '';
        var valorPago = 0;

        $( function () {
        	loadingModal();
        	$( '#btnAceptar' ).bind( 'click', clickCuentas );
            LlamadoAjax( "{ idCliente: " + idCliente + " }", dirProductos, 'GetListaFacturasAPagar', OnErrorCall, OnSuccessCallGetListaFacturasAPagar );        	        	
        } );

        function OnErrorCall( response ) {
            alert( response.status + " " + response.statusText );
        }

        function GetStyleFacturasInscritasAPagar( valor ) {
            switch ( valor ) {
                case 1:
                    return "invertido-agua-55px";
                case 2:
                    return "invertido-banco-55px";
                case 3:
                    return "invertido-edificio-55px";
                case 4:
                    return "invertido-estudios-55px";
                case 5:
                    return "invertido-gas-55px";
                case 6:
                    return "invertido-impuestocarro-55px";
                case 7:
                    return "invertido-celular-55px";
                case 8:
                    return "invertido-luz-55px";
                case 9:
                    return "invertido-salud-55px";
                case 10:
                    return "invertido-saludpension-55px";
                case 11:
                    return "invertido-telefono-55px";
                case 12:
                    return "invertido-tv-55px";
                case 13:
                    return "invertido-viajes-55px";
            }
        }

        function OnSuccessCallGetListaFacturasAPagar( response ) {
            response = eval( "( " + response.d + " )" );
            for ( var i = 0; i < response.length; i++ ) {
                $( "#movimientosCuentaActiva" ).append( '<div class="productoVinculado" id="productoVinculado' + i + '"><div class="producto_55px"><span class="' + GetStyleFacturasInscritasAPagar( parseInt( response[i].idTipoFactura ) ) + ' icono-propiedades-55px displayB"></span></div><span ><span class="textoColor paddingSup30 displayB">' + response[i].NombreFactura + '</span></span></div>' );
                $( '#productoVinculado' + i ).click( { response: response[i] }, clickFacturaLink );
            }
            ScrollToolFun();
            $( '.cargandoModal' ).dialog( 'close' );
        }

        function clickFacturaLink( event ) {
            loadingModal();
            idCuenta = '';
            idFactura = event.data.response.idFacturaCliente;
            valorPago = event.data.response.ValorAPagar;
            $( "#idNombre" ).html( " " + event.data.response.NombreFactura );
            $( '#idPagar' ).unbind( 'click' ); ;
            $( '#idPagar' ).bind( 'click', clickPagar );
            $( '.botonPagar' ).unbind( 'click' );
            $( '.botonPagar' ).click( { response: event.data.response }, clickBotonPagar );
            $( "#detalleProducto" ).show();
            $( "#campoDescripcionPago" ).val( "" );
            $( "#valorAPagar" ).html( "$" + valorPago.toFixed( 2 ) );
            $( "#fechaFacturacion" ).html( ( new Date ).toLocaleDateString() );
            $( "#idIcono" ).html( '<span class="' + GetStyleFacturasInscritasAPagar( parseInt( event.data.response.idTipoFactura ) ) + ' icono-propiedades-55px displayB"></span>' );
            $( '.cargandoModal' ).dialog( 'close' );
        }

        function clickPagar( event ) {
            if ( idCuenta == '' ) {
                loadingMessage( 'No ha seleccionado la cuanta que se va a debitar' );
                return;
            }

            loadingModal();
            LlamadoAjax( "{ idFacturaCliente: " + idFactura + ", valorApagar: " + valorPago.toFixed( 2 ) + ", idProductoCliente: " + idCuenta + " }", dirProductos, 'PagarFactura', OnErrorCall, function ( response ) {
                $( '.cargandoModal' ).dialog( 'close' );
                response = eval( "( " + response.d + " )" );
                if ( response == "Success" ) {
                    alert( 'Pago Realizado con exito' );
                    location.reload();
                } else {
                    loadingMessage( 'Error: ' + response );
                }
            } );
        }

        function clickBotonPagar( event ) {
            loadingModal();
            var id = parseInt( $( this ).attr( 'id' ) );
            LlamadoAjax( "{ idCliente: " + idCliente + " }", dirProductos, 'GetProductosCaptacion', OnErrorCall, function ( response ) {
                response = eval( "( " + response.d + " )" );

                $( "#idCuentasPagar" ).html( "" );
                for ( var i = 0; i < response.length; i++ ) {
                    if ( response[i].IdProducto == id ) {
                        $( "#idCuentasPagar" ).append( '<tr><td width="30"><div class="RadioButtonContainer"><span class="checkBoxUnChecked"><input type="radio" name="OrigenCuenta" id="OrigenCuenta" value="' + response[i].IdProductoCliente + '"/></span></div></td><td><label><strong>' + response[i].NombreProductoCliente + '</strong></label><br /><span class="textGris margenleft-20">Disponible:</span><br /><span class="saldoCuenta textoColor margen5 margenleft-20">$ ' + response[i].Saldo + '</span></td></tr>' );
                    }
                }

                $( '.RadioButtonContainer input' ).unbind( 'click' );
                $( '.RadioButtonContainer input' ).bind( 'click', CambiarRadioFondo );               

                $( '.iconoCancelar' ).click( 
				function () {
				    $( '.dialog' ).dialog( 'close' );
				} );
            } );
            $( '.cargandoModal' ).dialog( 'close' );
            $( '#seleccionarCuenta' ).dialog( { modal: true } );
        }

        function clickCuentas( event ) {
        	idCuenta = $( 'input:radio[name=OrigenCuenta]:checked' ).val();            
            $( '#seleccionarCuenta' ).dialog( 'close' );
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SectionIcon" runat="server">
<span class="icono iconoPagos48x">
                    	&nbsp;
                    </span>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="SectionTitle" runat="server">
     Pagos
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="InfoScreen" runat="server">
    Los íconos de esta pantalla pertenecen a los servicios que tienes registrados para pago electrónicos.<br />
    Para realizar el pago, debes seleccionar una factura y antes de realizar el pago, debes seleccionar una de tus cuentas para el desembolso.
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="MoreInfoScreen" runat="server">
    <a href="#" class="verMasInfo">
                	<span>
                    	<span>
                        	Ver más información
                        </span>
                    </span>
                </a>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="SectionOptions" runat="server">
    <ul>
                	<li>
                        <a href="pagosCreditos.aspx" id="pagarCreditos" class="opcionSeccion">
                            <span class="icono pagos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Pagar mis créditos
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="pagosFacturas.aspx" class="opcionSeccion">
                            <span class="icono pagos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Pagar mis facturas
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
</asp:Content>
<asp:Content ID="Content9" ContentPlaceHolderID="TitleSubSectionPanorama" runat="server">
    Pagos electrónicos
</asp:Content>
<asp:Content ID="Content10" ContentPlaceHolderID="OpcionesTileHorizontal" runat="server">
</asp:Content>
<asp:Content ID="Content11" ContentPlaceHolderID="MainContent" runat="server">
    <div class="paginaPagarFacturas">
                
            <div id="cuentaActivaProductos">
                <div id="infoCuentaMovimientos">
                      <span><span>Este es el portafolio de facturas vinculados a su cuenta:</span></span>
                </div>
                <div id="cuentasCarrusel" class="carruselMovimientos borderRightDotted">
                    <img src="images/topdiagonal12px.gif" class="diagonalimg"/>
                    <div id="botonUp">
                          <a href="#"><span class="ocultar">subir</span></a>
                    </div>                    
                    <div id="movimientosCuentaActiva"></div>
                    <img src="images/bottomdiagonal12px.gif" class="diagonalbottomimg"/>
                    <div id="botonDown">
                        
                        <a href="#"><span class="ocultar">bajar</span></a>
                    </div>
                    
                </div>
            </div>
      
            <div class="detalleProducto" id="detalleProducto" style="display:none;">
                <h1>
                    <span class="icono invertido-Agua-48px displayB"  id="idIcono"></span><span class="fondoAdicional"><span class="estiloTexto" id="idNombre">
                        Nombre asignado al pago seleccionado
                    </span></span>
                </h1>
                    <!--inicio de información básica de pantalla-->
                <div class="detalleProductoScroll">
        
                <!--fin de información básica de pantalla--> 
                    <div class="formularioProductos">
                        <table class="tablaProductos" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="35%" class="labelsModal">Valor a pagar:</td>
                                <td width="65%">
                                    <span class="datoCliente" id="valorAPagar">
                                        $ 5000000
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="labelsModal">Fecha de facturación:</td>
                                <td>
                                    <span class="datoCliente" id="fechaFacturacion">
                                        21 de Agosto
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="labelsModal">Descripción de pago:</td>
                                <td>
                                    <input id="campoDescripcionPago" name="campoDescripcionPago"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="OpcionesPagar">
                    <menu type="toolbar">
                        <div class="SeleccionCuentaBtn">
                            <ul>
                                <li> <a href="#" title="Pagar con una cuenta de ahorros" id="1" class="boton_26px botonPagar"><span class="displayB iconoCuentaAhorros"><span class="ocultar">Cuenta de Ahorros</span></span></a></li>
                                <li> <a href="#" title="Pagar con una cuenta corriente" id="2" class="boton_26px botonPagar"><span class="displayB iconoCuentaCorriente"><span class="ocultar">Cuenta Corriente</span></span></a></li>
                            </ul>
                        </div>
                        <div class="controlBtn">
                            <ul>
                                <li> <a href="#" title="Pagar" id="idPagar" class="boton_26px backgroundVerde"><span class="displayB iconoAceptarVentana"><span class="ocultar">Solicitar</span></span></a></li>
                                <li> <a href="#" title="Imprimir" class="boton_26px"><span class="displayB iconoImprimirBtn"><span class="ocultar">Imprimir</span></span></a></li>
                                <li> <a href="#" title="Cancelar" class="boton_26px backgroundRojo"><span class="displayB iconoCancelar"><span class="ocultar">eliminar Producto</span></span></a></li>
                            </ul>
                        </div>
                    </menu>
                </div>
            </div>
        </div>
</asp:Content>
<asp:Content ID="Content12" ContentPlaceHolderID="FooterWebPage" runat="server">
</asp:Content>
<asp:Content ID="Content13" ContentPlaceHolderID="VentanasEmergentes" runat="server">
<div id="seleccionarCuenta" class="dialog" title="Pagar facturas">
        <div class="menuTituloForm">
            <a href="#" title="Adjuntar archivo" class="boton_26px"><span class="displayB iconoAdjuntarArchivo"><span class="ocultar">Adjuntar archivo</span></span></a>
            <h2 class="noMargin noPadding"><span class="floatright">Cuentas disponibles</span></h2>
        </div>
        <p>Seleccione la cuenta para realizar su pago.</p>
        <div class="formularioProductos">
        	<table>
                <tr>
                	<td width="40%" class="labelsModal">
                    	Seleccione su cuenta:
                    </td>
                    <td width="60%">
                    	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="idCuentasPagar">
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <menu type="toolbar">
            <div class="controlBtn">
                <ul>
					<li> <a href="#" title="Aceptar" id="btnAceptar" class="boton_26px backgroundVerde"><span class="displayB iconoAceptarVentana"><span class="ocultar">Aceptar</span></span></a></li>
                    <li> <a href="#" title="Cancelar" class="boton_26px backgroundRojo"><span class="displayB iconoCancelar"><span class="ocultar">eliminar Producto</span></span></a></li>
                </ul>
            </div>
        </menu>
    </div>
</asp:Content>
